<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 给组件命名（两种写法：1. defineOptions 2. export default）
// 推荐写法（若项目支持 defineOptions 宏）:
defineOptions({ name: 'Home' })

const router = useRouter()

onMounted(() => {
  console.log('Home mounted')
})

function toList() {
  router.push({ name: 'list' })
}

function toDetailByPush() {
  router.push({ name: 'detail', params: { id: 1001 } })
}

function toDetailByReplace() {
  router.replace({ name: 'detail', params: { id: 2002 } })
}
</script>

<template>
  <div>
    <h1>Home 页面</h1>
    <p>示例：从这里跳转到 List / Detail</p>
    <button @click="toList">去 List（router.push）</button>
    <button @click="toDetailByPush">去 Detail(id=1001)（push）</button>
    <button @click="toDetailByReplace">去 Detail(id=2002)（replace）</button>

    <hr/>
    <!-- 使用 router-link 也可以，并支持命名路由 -->
    <router-link :to="{ name: 'detail', params: { id: 42 } }">router-link 到 Detail(42)</router-link>
  </div>
</template>
